<template>
 <div class="root">
     <div class="content-wrapper">
         <div class="avatar">
            <img width="64px" height="64px" :src='seller.avatar' alt="商户头像"/>
         </div>
         <div class="content">
            <div class="title">
                <span class="brand"></span>
                <span class="name">{{seller.name}}</span>
            </div>
            <div class="description">
                {{seller.description}}/{{seller.deliveryTime}}分钟送达
            </div>
            <div class="supports" v-if="seller.supports">
                <span class="icon" :class="classMap[seller.supports[0].type]"></span>
                <span class="support">{{seller.supports[0].description}}</span>
            </div>
            <div class="support_count_wrapper" v-show="seller.supports.length>1">
                <span class="support_count">{{seller.supports.length}}个</span>
                <i class="icon-keyboard_arrow_right"></i>
            </div>
         </div>        
     </div>
     <div class="bulletin-wrapper" v-show='seller.bulletin'>
        <span class="bulletin_icon"></span>
        <span class="bulletin_content">{{seller.bulletin}}</span>
        <i class='icon-keyboard_arrow_right'></i>
     </div>
 </div>
</template>

<script>
export default {
  data() {
    return {
      classMap: ["decrease", "discount", "special", "invoice", "guarantee"]
    };
  },
  props: {
    seller: {
      type: Object,
      required: true,
      default: ""
    }
  },
  components: {},
  created() {
    console.log("created:", this.seller.avatar);
  }
};
</script>

<style lang='stylus' rel='stylesheet/stylus'>
@import '../../common/stylus/mixin'
.root
    background: rgba(7, 17, 27, 0.5)
    .content-wrapper
        padding: 24px 12px 16px 18px
        display: flex
        flex-direction: row
        color: white

        &>.avatar
            &>img
                width: 64px
                height: 64px
                border: solid rgba(0, 0, 0, 0) 1px
                border-radius: 4px

        &>.content
            flex 1
            font-size: 14px
            margin-left: 16px
            position: relative
            .title
                .brand
                    vertical-align: top
                    margin-top: 2px
                    display: inline-block
                    width: 30px
                    height: 18px
                    bg-image('brand')
                    background-size: cover
                    background-repeat: no-repeat

                .name
                    margin-left: 6px
                    font-size: 16px
                    line-height: 18px
                    font-weight: bold
            .description
                margin-top: 8px
                font-size: 12px
                line-height: 12px
                font-weight: 200
        
            .supports
                margin-top: 10px
                .icon 
                    vertical-align: middle
                    display: inline-block
                    width: 16px
                    height: 16px
                    background-size: cover
                    background-repeat: no-repeat

                    &.decrease 
                        bg-image('decrease_1')
                    &.discount
                        bg-image('discount_1')
                    &.special
                        bg-image('special_1')
                    &.invoice
                        bg-image('invoice_1')
                    &.guarantee
                        bg-image('guarantee_1')
                .support 
                    margin-left 4px
                    font-size 10px
                    line-height 12px
                    font-weight 200
            .support_count_wrapper
                position absolute
                bottom 0
                right 0
                height 24px
                line-height 24px
                background-color: rgba(0, 0, 0, 0.2)
                border: solid rgba(0, 0, 0, 0) 1px
                border-radius: 18px
                padding 0px 8px 0px 8px
                text-align center
                font-size 10px
                .icon-keyboard_arrow_right
                    font-size 10px
        .test 
            display: none
            width: 50px
            height: 50px
            background-color: yellow
            background-size: 50px 50px
            background-repeat: no-repeat
        
    .bulletin-wrapper
        display flex
        flex-direction row
        height 28px
        padding 0 12px
        align-items center
        background rgba(7,17,27,0.2)
        color white
        .bulletin_icon
            display inline-block
            width 22px
            height 12px
            bg-image('bulletin')
            background-size 22px 12px
            background-color red
        .bulletin_content
            display inline-block
            flex 1
            white-space nowrap 
            overflow hidden
            text-overflow ellipsis
            font-size 10px
            line-height 28px
            font-weight 200
            margin-left 4px
        .icon-keyboard_arrow_right
            font-size 10px
</style>

